<template>
  <!-- template就是vue组件中的结构部分 -->
  <!-- template一定有且只有一个根元素（div标签） -->
  <div>
    <div class="name">我所在的集体组织名字叫{{ name }}</div>
    <div class="hobby">
      我们喜欢的idol,他最近爆火,因为他会{{ hobby[0] }},{{ hobby[1] }},{{
        hobby[2]
      }}
      <p>
        当他难过的时候,喜欢穿{{ hobby[2] }},{{
          age * 2 > 19 ? '孩子长大了' : '孩子喜欢背带裤'
        }}
      </p>
      <div class="active">
        最近{{ active.watch }},<b>{{ active.wish[0] }}</b>
      </div>
    </div>
  </div>
</template>

<script>
// script是行为部分，js代码在这写
export default {
  data() {
    return {
      name: '小黑子',
      age: 8,
      hobby: ['rap', '唱跳', '打篮球', '背带裤'],
      active: {
        watch: '2022世界杯',
        wish: ['Rnm,退钱！！', '国足出线世界杯'],
      },
    }
  },
}
</script>

<style lang="less">
/* style这部分就是样式部分，css代码在这写 */
/* less在脚手架内部已经配好了设置，但是需要手动下载less-loader安装包 */
div {
  width: 280px;
  height: 100px;
  margin: 100px auto;
}
.name {
  color: #084;
}
.hobby {
  color: #f3746b;
}
.active {
  color: #57534b;
}
</style>
